<!-- 评价列表页面 -->
<script setup>
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import { timeFormat } from '@/uni_modules/uview-plus';
import { reactive } from 'vue'

import { getEvaluateListApi } from '@/api/shop.js'
// 全局数据
const info = reactive({
  id: null,
  list: [],
  pageNo: 1,
  pageNo: 1, // 当前页码
  pageSize: 10, // 每页数量
  totalPages: 10, // 总页数
  status: 'loadmore'
})
// 首次加载
onLoad(options => {
  // console.log(options)
  info.id = options.id
  getList()
})
// 监听页面滚动到底部
onReachBottom(() => {
  if (info.status !== 'loadmore') return
  getList()
})
// 查询订单评价列表
function getList() {
  info.status = 'loading';
  getEvaluateListApi({
    spuId: info.id,
    type: '0',
    pageNo: info.pageNo,
    pageSize: info.pageSize,
    categoryId: info.categoryId
  })
    .then(res => {
      const { list, total } = res.data
      info.totalPages = Math.ceil(total / info.pageSize)
      info.pageNo === 1 ? info.list = list : info.list = [...info.list, ...list]
      info.pageNo++;
      info.status = info.pageNo >= info.totalPages ? 'nomore' : 'loadmore'
    })
}
</script>

<template>
  <view class="evaluate-list-page">
    <!-- 空状态 -->
    <up-empty v-if="info.list.length <= 0" mode="data" text="暂无评价" marginTop="200rpx">
    </up-empty>
    <!-- 列表 -->
    <template v-else>
      <view class="list">
        <view class="item" v-for="(item, index) in info.list" :key="index">
          <!-- 头部 -->
          <view class="head-box">
            <view class="left">
              <up-avatar :src="item.userAvatar"></up-avatar>
              <text class="name">{{ item.userNickname }}</text>
            </view>
            <view class="right">{{ timeFormat(item.createTime, 'yyyy-mm-dd') }}</view>
          </view>
          <!-- 评价文字 -->
          <view class="cnt">
            <text>{{ item.content }}</text>
          </view>
          <view>
            <!-- 图片列表 -->
            <view class="picList">
              <up-image v-for="(src, index) in item.picUrls" :key="index" :src="src" width="170rpx" height="170rpx"
                mode="aspectFill" />
            </view>
          </view>
        </view>
      </view>
      <!-- 加载更多 -->
      <up-loadmore :status="info.status" :loading-text="`努力加载中`" :loadmore-text="'加载更多'" :nomore-text="'没有更多了'" dashed
        line />
    </template>

  </view>
</template>

<style lang="scss" scoped>
.evaluate-list-page {
  padding-bottom: 30rpx;

  // 列表
  & .list {
    padding-top: 10rpx;

    // item
    & .item {
      margin-top: 30rpx;
      padding: 0 30rpx;
      border-bottom: 10rpx solid #F9F9F9;

      &:last-child {
        border-bottom: none;
      }

      // 头部
      & .head-box {
        display: flex;
        align-items: center;
        justify-content: space-between;

        & .left {
          display: flex;
          align-items: center;

          &::v-deep .u-avatar {
            width: 60rpx;
            height: 60rpx;
          }

          & .name {
            margin-left: 10rpx;
            font-weight: 500;
            font-size: 28rpx;
            color: #333333;
          }
        }

        & .right {
          font-weight: 400;
          font-size: 24rpx;
          color: #333333;
        }
      }

      & .cnt {
        margin-top: 20rpx;

        & text {
          font-weight: 500;
          font-size: 24rpx;
          color: #333333;
        }
      }

      & .picList {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        margin-top: 20rpx;
        margin-bottom: 30rpx;

        &::v-deep .u-image {
          margin-right: 20rpx;
          border-radius: 10rpx !important;
          overflow: hidden !important;
        }
      }
    }

    // 
  }

  // 加载更多
  &::v-deep .u-loadmore {
    margin-top: 40rpx !important;
  }
}
</style>